import React, { useEffect, useState  } from 'react';

const App: React.FC = () => {
  const [role, setRole] = useState('guest');
  useEffect(() => {
    // 监听基座发送的数据
    window.microApp?.addDataListener((data: any) => {
      console.log('React TS 子应用收到数据:', data);
      setRole(data.role);
    });

    // 向基座发送数据
    window.microApp?.dispatch({ message: 'Hello from React TS App' });

    return () => {
      window.microApp?.clearDataListener();
    };
  }, []);

  return (
    <div className="App">
      <h1>React TS 子应用</h1>
      {role === 'admin' && <p>管理员可见的内容</p>}
      {role === 'user' && <p>普通用户可见的内容</p>}
      {role === 'guest' && <p>访客可见的内容</p>}
    </div>
  );
};

export default App;